<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>插入和替换元素操作</title>
		<!-- 插入和替换元素操作：针对元素增删改操作 
 		append()          功能：在匹配元素集合中所有元素的内部末尾插入内容
		prepend()         功能：在匹配元素集合中所有元素的内部末尾插入内容
		
		after()           功能：在匹配元素集合中所有元素的外部后面插入内容
		before()          功能：在匹配元素集合中所有元素的外部前面插入内容
		
		remove()
		empty()
		
		replayWith()
		-->
		<style>
			button{
				margin: 5px;
				padding: 10px 15px;
				cursor: pointer;
			}
			body{
				margin: 20px;
			}
			#target{
				border: 1px solid red;
				padding: 10px;
				margin-top: 10px;
				margin-left: 5px;
				border-radius: 5px;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		 <button id="appendBtn">内部末尾插入元素</button>
		 <button id="prepenBtn">内部开头插入元素</button>
		 <button id="afterBtn">外部的后面插入元素</button>
		 <button id="beforeBtn">外部的前面插入元素</button>
		 <button><button>
		 <button></button>
		 <button></button>
		 <!-- 目标显示区域-->
		 <div id="target">
			 <p>目标元素的初始段落</p>
		 </div>
		 <!-- 用于插入和替换的区域 -->
		 <div id="newElement" style="display: none;">
			 <p>插入新元素的初始段落</p>
		 </div>
		 <script>
			 /* 1.点击  内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			$("#appendBtn").click(function(){
				//效果：点击按钮 追加新元素--自带内容
				//1.1追加内容是新元素---克隆--html结构全部复制出来，元素包含属性
				var cpe=$("#newElement").clone();
				//clone() 创建一个元素的副本，副本包含：内部元素以及所有属性和属性值
				//1.2 自带属性和属性值：将隐藏---改成显示
				cpe.css("display","block");
				//1.3 将复制出来的新元素，追加给当前元素shang
				$("#target").append(cpe);
			});
				/* 2.点击 内部末尾插入元素 按钮 p文本后面追加新元素中包含内容操作 */	
			$("#prepenBtn").click(function(){
				var pre=$("#newElement").clone();
				pre.css("display","block");
				$("#target").prepend(pre);
			});
				/* 3.点击 外部后面插入元素 按钮 p文本后面追加新元素中包含内容操作 */
			$("#afterBtn").click(function(){
				var aft=$("#newElement").clone();
				aft.css("display","block");
				$("#target").after(aft);
			});
				/* 4.点击 内部前面插入元素 按钮 生成 圆形，保留背景色，文本不需要
				                                             背景图：300*300*/
			$("#beforeBtn").click(function(){
				var bef=$("#newElement").clone();
				bef.css({
					"height":"300px",
					"weight":"300px",
					"background-color":"#ffff00",
					"background-size":"100% 100%",
					border-radius":"50%",
					"background-image":"url(../img/2.png)",
					"color":"transparent"
				});
				$("#target").before(bef);
			});											 
		 </script>
	</body>
</html>